import React from 'react';
import { Table, Pagination } from 'antd';
import axios from 'axios'
import './orderList.css'
import { useState, useEffect } from "react";
export default function App() {
    let [shop, setshop] = useState()
    let [shops, setshops] = useState([])
    let [arr, setarr] = useState([])
    let [arr1, setarr1] = useState([])
    let [arr2, setarr2] = useState([])
    let pages = 1
    const columns = [
        {
            title: '食品名称',
            dataIndex: 'id',
        },
        {
            title: '食品介绍',
            dataIndex: 'total_amount',
        },
        {
            title: '评分',
            dataIndex: 'status_bar.title',
        },
    ];
    function onExpand(expanded, record) {
        console.log(expanded, record);
        if (expanded == true) {
            axios.get(`https://elm.cangdu.org/v1/user/${record.user_id}`).then(res => {
                // console.log(res);
                arr = res.data
                setarr(arr)
            })
            axios.get(`https://elm.cangdu.org/v1/addresse/${record.address_id}`).then(res => {
                // console.log(res);
                arr1 = res.data
                setarr1(arr1)
            })
            axios.get(`https://elm.cangdu.org/shopping/restaurant/${record.restaurant_id}`).then(res => {
                // console.log(res);
                arr2 = res.data
                setarr2(arr2)
            })
        }
    }
    useEffect(() => {
        axios.get('https://elm.cangdu.org/bos/orders/count?restaurant_id=undefined').then(res => {
            if (res.data.status == 1) {
                setshop(res.data.count)
            }
        })
        clk()
    }, []);
    function clk() {
        axios.get(`https://elm.cangdu.org/bos/orders?offset=${(pages - 1) * 20}&limit=20&restaurant_id=undefined`).then(res => {
            shops = res.data
            setshops([...shops])
        })

    }
    function change(page) {
        pages = page
        clk()
    }
    return <div className='main'>
        <Table
            columns={columns}
            pagination={false}
            rowKey={'id'}
            onExpand={onExpand}
            expandable={{
                expandedRowRender: (record) => (
                    <p
                        style={{
                            margin: 0,
                        }}
                        className='view'
                    >
                        <span>用户名:{arr.username}</span>
                        <span>店铺名称:{arr2.name}</span>
                        <span>收货地址:{arr1.address}</span>
                        <span>店铺 ID:{arr2.id}</span>
                        <span>店铺地址:{arr2.address}</span>
                    </p>
                ),
                rowExpandable: (record) => record.name != 'Not Expandable',
            }}
            dataSource={shops}
        />
        <Pagination total={shop} showTotal={(shop) => `共${shop}条`}
            showSizeChanger={false} onChange={change} pageSize={shops.length} />
    </div>
}